import cs from 'classnames';
import styles from '../../index.module.less';
import { memo, useEffect, useRef, useState } from "react";
import { map, find } from 'lodash';
import { pieChartOption } from "../../constants";
import * as echarts from 'echarts';
import { getTodayTaskSta } from "@/api/modules/dashboard";
import { getDictByCode } from "@/api/modules/dict";
import { useRequest } from "ahooks";

interface Props {
    boxClass: string
}

const LEGEND_LIST = [
    {
        name: '正常配送',
        color: '#00DCD3',
        count: 24,
        key: ''
    },
    {
        name: '正常返空',
        color: '#5C6FFE',
        count: 8
    },
    {
        name: '紧急配送',
        color: '#F92356',
        count: 10
    },
    {
        name: '紧急返空',
        color: '#FBAA35',
        count: 4
    },
]

const COLOR_LIST = ['#00DCD3', '#5C6FFE', '#F92356', '#FBAA35']

export default (props: Props) => {
    const { boxClass } = props;
    const pieChartRef = useRef(null);
    const [legendList, setLegendList] = useState(LEGEND_LIST);
    const { data: data } = useRequest(() => getTodayTaskSta({}))
    const { data: data2 } = useRequest(() => getDictByCode({ parentId: 0, code: "JOB_TYPE" }))
    const taskData = data?.data;
    const taskTypeData = data2?.data

    useEffect(() => {
        const chartData:any = []
        const result = map(taskData?.jobTypeCounts || [], (item: any, index: number) => {
            const name = find(taskTypeData, (i: any) => i.value === item.jobType)?.label
            chartData.push(item.count)
            return {
                ...item,
                color: COLOR_LIST[index],
                name
            }
        })
        setLegendList(result)
		const pieChart = echarts.init(pieChartRef.current);
        const option = pieChartOption(taskData?.totalCount);
		pieChart.setOption({
            ...option,
            series: [{
                ...option.series[0],
                data: chartData
            }]
        });

		// 组件卸载时销毁图表
		return () => {
			pieChart.dispose();
		};
    }, [taskData])

    return (
        <div className={cs(styles.task, styles.commonBox, boxClass)}>
            <div className={styles.moduleHeader}>
                <div className={cs(styles.icon)}></div>
                <div className={styles.title}>任务统计</div>
            </div>
            <div className={styles.taskContent}>
                <div className={styles.pieContainer}>
                    <div ref={pieChartRef} style={{width: '100%', height: '100%'}}></div>
                </div>
                <div className={styles.legendList}>
                    {
                        map(legendList, (item: any, index: number) => {
                            return (
                                <div className={styles.item} key={index}>
                                    <div className={styles.color}>
                                        <div className={styles.block} style={{background: item.color}}></div>
                                    </div>
                                    <div className={styles.name}>
                                        <div className={styles.label}>{item.name}</div>
                                        <div className={styles.value}>{item.count}</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}